<template>
	<!-- 待付款 -->
	<view class="dddd">
		<!-- 有数据 -->

		<view class="payments">
			<view
				class="orderinfo"
				v-show="array.length"
				v-for="(item, index) in array"
			>
				<view class="orderlists">
					<view class="oredetime">
						<view class="times">{{ item.createTime }}</view>
						<view class="timestitle">{{ item.orderStatus }}</view>
					</view>
					<template v-for="(items, indexs) in item.orderInfoList">
						<orderpayments
							:key="indexs"
							:orderContent="items"
							v-show="array.length"
						></orderpayments>
					</template>
				</view>
			</view>
			<view style="text-align: center;margin-top: 30px;">
				我也是有底线的
			</view>
		</view>
		<view class="orderListInfo" v-show="!array.length">
			<!-- 暂无订单 -->
			<u--image
				width="100vw"
				height="400px"
				src="https://img.ixintu.com/download/jpg/20210408/bff28269f495ba2cdf07375741baf926_800_800.jpg!con"
			></u--image>
			<view class="error">暂无订单.......</view>
		</view>
	</view>
</template>

<script>
import {getOrderPre} from "../../network/order.js";
import orderpayments from "../orderpayments.vue";
export default {
	components: {
		orderpayments
	},
	data() {
		return {
			array: []
		};
	},
	async created() {
		let res = await getOrderPre();

		this.array = res.data.list;
		console.log("付款", this.array);
	}
};
</script>

<style lang="scss">
.orderlists {
	margin-top: 20px;
	background-color: white;
	padding: 10px;

	.oredetime {
		display: flex;
		height: 40px;
		line-height: 40px;
		text-align: center;
		border-bottom: 1px solid #ccc;

		.times {
			flex: 1;
			text-align: left;
			font-family: 16px;
		}

		.timestitle {
			text-align: right;
			flex: 1;
			font-family: 16px;
			color: red;
		}
	}
}
</style>
